import { nanoid } from 'nanoid'
import React, { Component } from 'react'
import './App.css'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'

export default class App extends Component {
    state = {
        todos:[
            {
                id:nanoid(),
                title:'吃饭',
                isDone:true
            },
            {
                id:nanoid(),
                title:'上分',
                isDone:true
            },
            {
                id:nanoid(),
                title:'敲代码',
                isDone:false
            }
        ]
    }
    render() {
        let {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header/>
                    <List todos={todos}/>
                    <Footer todos={todos}/>
                </div>
            </div>
        )
    }
}
